<!DOCTYPE html>
<html>
  
  <head>
      <meta charset="UTF-8">
      <title>购票</title>
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
      <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
      <link rel="stylesheet" href="/booking2/css/font.css">
      <link rel="stylesheet" href="/booking2/css/xadmin.css">
      <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
      <script type="text/javascript" src="/booking2/lib/layui/layui.js" charset="utf-8"></script>
      <script type="text/javascript" src="/booking2/js/xadmin.js"></script>
      <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
      <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
      <![endif]-->
  </head>
  
  <body background="/booking/images/home/banner.jpg">
    <div class=" text-center layui-col-lg12" style="text-align: center;">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend class="x-red">订票查询</legend>
        </fieldset>
    </div>
    <div class=" layui-col-md1">欢乐谷之夜</div>
    <div class="x-body layui-col-md10">
            <fieldset class="layui-elem-field layui-bg-red">
                <legend>请进行操作</legend>
                <div class="layui-field-box layui-bg-gray " style="text-align: center;">
                    <table class="layui-table">
                        <thead>
                        <th>预订单ID</th>
                        <th>票名</th>
                        <th>预订人姓名</th>
                        <th>预定时间</th>
                        <th>预定人电话</th>
                        <th>预定人身份证号码</th>
                        <th>预定状态</th>
                        <th>改签状态</th>
                        <th>退票状态</th>
                        <th>操作</th>
                        </thead>
                        <tbody>
                        <tr th:each="x:${bookings}">
                            <td th:text="${x.bookingId}"></td>
                            <td th:text="${x.ticket.ticketName}"></td>
                            <td th:text="${x.bookingName}"></td>
                            <td th:text="${x.bookingTime}"></td>
                            <td th:text="${x.bookingTel}"></td>
                            <td th:text="${x.bookingIdenty}"></td>
                            <td >
                                &emsp;<span th:if="${x.bookdingStatus==0}">预定中</span>
                                <span th:if="${x.bookdingStatus==1}">已过期</span>
                            </td>
                            <td >
                                <span th:if="${x.bookingChangeStatus==0}">未改签</span>
                                <span th:if="${x.bookingChangeStatus==1}">已改签</span>
                            </td>
                            <td >
                                <span th:if="${x.bookingRefundStatus==0}">未退票</span>
                                <span th:if="${x.bookingRefundStatus==1}">已退票</span>
                            </td>
                            <td >
                                <button  th:if="${x.bookdingStatus==0 and x.bookingRefundStatus==0}" class="layui-btn layui-btn-xs" onclick="del(this)" href="javascript:;" >
                                   退票
                                </button>
                                <button  id=btn1 th:if="${x.bookdingStatus==0 and x.bookingRefundStatus==0 and x.bookingChangeStatus==0}" class="layui-btn layui-btn-xs"  onclick="upDate(this)" href="javascript:;" >
                                    改签
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
    </fieldset>
    </div>
    <script>
        //退票
        function del(obj){
            var bookingId = $(obj).parents("tr").find("td").eq(0).text();
            //调出弹出框
            layer.open({
                content: '请问您是否确定退票？'
                ,btn: ['确定', '取消'],
                btnAlign: 'r',
                anim: 2
                ,yes: function(index, layero){
                    layer.close(index);
                    //发送ajaxj请求
                    $.ajax({
                        url: "/booking/reBooking",//请求地址
                        type: "post",//请求方式
                        data: {"bookingId": bookingId},
                        dataType: "text",//返回的数据类型 :对象:json,字符串和数字:text
                        success:function (data) {
                            layer.alert("退票成功！费用将会在10个工作日内返到微信!");
                            setTimeout("window.location.reload();",1000);
                        }
                    })
                }
                ,btn2: function(){}
            });
        }


        //改签
        function upDate(obj){
            var bookingId = $(obj).parents("tr").find("td").eq(0).text();
            //调出弹出框
            layer.open({
                type: 2,
                title: '请填写改签日期',
                shadeClose: true,
                shade: 0.8,
                area: ['600px', '55%'],
                shadeClose: false,
                content:'/booking/changesBooking?bookingId='+bookingId
            });
        }



    </script>
  </body>

</html>